<template>
  <div class="home">
    <h2>注册</h2>
    <input
      type="text"
      placeholder="请输入名称"
      name=""
      v-model.trim="name"
      id=""
    />
    <div class="btn" @click="go()">进入聊天室</div>
  </div>
</template>

<script>
// @ is an alias to /src

import { nanoid } from "nanoid";
import { mapMutations } from "vuex";
import axios from "axios";
export default {
  name: "HomeView",
  data() {
    return {
      name: "",
    };
  },
  methods: {
    ...mapMutations(["setUser"]),
    async go() {
      if (!this.name) return;
      let res = await axios.get(
        "https://api.uomg.com/api/rand.avatar?sort=女&format=json"
      );
      console.log(res.data.imgurl);

      let obj = {
        name: this.name,
        id: nanoid(),
        img: res.data.imgurl,
      };
      this.setUser(obj);
      this.$router.push('/about');
      // if (this.name) {
      //   this.$router.push({
      //     name: "about",
      //     query: {
      //       name: this.name,
      //       id: nanoid(),
      //       img: res.data.imgurl,
      //     },
      //   });
      // }
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  border: 1px solid #ccc;
  background: #fff;
  width: 400px;
  height: 215px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  text-align: center;

  h2 {
    text-align: center;
    line-height: 70px;
    color: #000;
  }
  input {
    width: 200px;
    height: 30px;
    margin: 10px auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    font-size: 14px;
    padding-left: 10px;
  }
  .btn {
    width: 200px;
    height: 30px;
    margin: 10px auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    background: #0dbede;
    color: #fff;
    line-height: 30px;
    font-size: 12px;
    cursor: pointer;
  }
}
</style>
